<template>
    <div class="box">
        <div class="tl fx">
            <div class="icon">
                <Nimg src="012.png" width="40" height="56" />
            </div>
            {{ yuyueType === "geren" ? "个人预约" : "团队预约" }}
        </div>
        <div class="con">
            <div class="line fx" v-if="yuyueType === 'geren'">
                <div class="name">
                    预约人数
                    <span>（最多5位）</span>
                </div>
                <div class="fx1"></div>
                <div class="stepNumber fx">
                    <div class="minus" @click="mins">
                        <Nimg src="018.png" width="52" height="52" />
                    </div>
                    <div class="num">{{ yyrs }}</div>
                    <div class="add" @click="add">
                        <Nimg src="019.png" width="52" height="52" />
                    </div>
                </div>
            </div>
            <div class="bt" v-if="yuyueType === 'geren'">
                请填写{{ yyrs }}位个人信息
            </div>
            <div class="bt" v-else>请填写信息</div>
            <template v-if="yuyueType === 'geren'">
                <div v-for="(i, index) in grxx" :key="index">
                    <div class="line fx">
                        <div class="name">姓名</div>
                        <div class="fx1">
                            <input
                                type="text"
                                v-model="i.name"
                                placeholder="请输入姓名"
                            />
                        </div>
                    </div>
                    <div class="line fx">
                        <div class="name">证件号码</div>
                        <div class="fx1">
                            <input
                                type="idcard"
                                v-model="i.idcard"
                                placeholder="请输入证件号码"
                            />
                        </div>
                    </div>
                    <div class="line fx" v-if="index === 0">
                        <div class="name">手机号码</div>
                        <div class="fx1">
                            <input
                                type="number"
                                v-model="tel"
                                placeholder="请输入手机号码"
                            />
                        </div>
                    </div>
                </div>
            </template>

            <template v-if="yuyueType === 'tuandui'">
                <div class="line fx">
                    <div class="name">姓名</div>
                    <div class="fx1">
                        <input
                            type="text"
                            v-model="td_name"
                            placeholder="请输入姓名"
                        />
                    </div>
                </div>
                <div class="line fx">
                    <div class="name">联系电话</div>
                    <div class="fx1">
                        <input
                            type="number"
                            v-model="tel"
                            placeholder="请输入联系电话"
                        />
                    </div>
                </div>
                <div class="line fx">
                    <div class="name">团队人数</div>
                    <div class="fx1">
                        <input
                            type="number"
                            v-model="td_yyrs"
                            placeholder="请输入团队人数"
                        />
                    </div>
                </div>
                <div class="line fx">
                    <div class="name">参观单位</div>
                    <div class="fx1">
                        <input
                            type="text"
                            v-model="cgdw"
                            placeholder="请输入参观单位"
                        />
                    </div>
                </div>
            </template>

            <div class="tip">
                温馨提示：如无法按时入馆参观，观众需在所预约时间前在本系统取消预约，逾期无法取消，系统将自动默认该账号爽约1次。累计3次爽约的账号,将在90天内不能预约。
            </div>
            <div class="bigBtn fx jcc" @click="next">确认</div>
        </div>
    </div>
</template>
<script>
const moment = require("moment");
import $ from "@/common";
export default {
    props: {
        yuyueType: {
            type: String,
            default: "geren",
        },
    },
    data() {
        return {
            yyrs: 1,
            tel: "",
            td_name: "",
            td_yyrs: "",
            cgdw: "",
            grxx: [
                {
                    name: "",
                    idcard: "",
                },
            ],
        };
    },
    computed: {},
    methods: {
        mins() {
            if (this.yyrs > 1) {
                this.yyrs--;
                this.grxx.pop();
            }
        },
        add() {
            if (this.yyrs < 5) {
                this.yyrs++;
                this.grxx.push({
                    name: "",
                    idcard: "",
                });
            }
        },
        next() {
            if (this.yuyueType === "geren") {
                let isPass = this.grxx.every((ele) => {
                    return ele.name && ele.idcard;
                });

                if (this.tel.trim() === "") {
                    $.tip("请输入手机号码");
                    return;
                }

                if (isPass) {
                    let url = $.index("appoint");
                    let data = {
                        num: this.yyrs,
                        type: "1",
                        name: this.grxx[0].name,
                        idcard: this.grxx[0].idcard,
                        appoint_date: $._checkedDay,
                        appoint_time: $._checkedTime,
                        tel: this.tel,
                    };
                    $.post(url, data).then((res) => {
                        if (res.isError) {
                            return;
                        }
                        $.log(res);
                        let appoint_id = res.Id;
                        let sucEwm = res.path;
                        if (this.grxx.length === 1) {
                            this.$emit("success", sucEwm);
                            return;
                        }
                        this.grxx.forEach((ele, index) => {
                            if (index > 0) {
                                let url = $.index("mappoint");
                                let data = {
                                    appoint_id,
                                    idcard: ele.idcard,
                                    name: ele.name,
                                    tel: this.tel,
                                };
                                $.post(url, data).then((res) => {
                                    if (res.isError) {
                                        return;
                                    }
                                    if (index === this.grxx.length - 1) {
                                        this.$emit("success", sucEwm);
                                    }
                                });
                            }
                        });
                    });
                } else {
                    $.tip("请输入姓名或证件号码");
                }
            } else {
                if (this.td_name.trim() === "") {
                    $.tip("请输入姓名");
                    return;
                }
                if (this.tel.trim() === "") {
                    $.tip("请输入联系电话");
                    return;
                }
                if (this.td_yyrs.trim() === "") {
                    $.tip("请输入团队人数");
                    return;
                }
                if (this.cgdw.trim() === "") {
                    $.tip("请输入参观单位");
                    return;
                }

                let url = $.index("appoint");
                let data = {
                    type: "2",
                    name: this.td_name,
                    tel: this.tel,
                    num: this.td_yyrs,
                    company: this.cgdw,
                    appoint_date: $._checkedDay,
                    appoint_time: $._checkedTime,
                };
                $.post(url, data).then((res) => {
                    if (res.isError) {
                        return;
                    }
                    let sucEwm = res.path;
                    this.$emit("success", sucEwm);
                });
            }
        },
    },
    mounted() {},
};
</script>
<style lang="less" scoped>
.stepNumber {
    .num {
        padding: 0 30rpx;
    }
}

.box {
    width: 640rpx;
    background: #ffffff;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    opacity: 1;
    padding: 50rpx;
    line-height: 1;
    .tl {
        .icon {
            margin-right: 12rpx;
        }
        font-size: 40rpx;
    }
    .con {
        padding-top: 56rpx;
        .bt {
            font-size: 28rpx;
            font-weight: bold;
            margin-top: 28rpx;
        }
        .line {
            font-size: 28rpx;
            border-bottom: 2rpx solid #f2f2f2;
            padding: 28rpx 0;
            input {
                width: 100%;
                text-align: right;
                font-size: 28rpx;
            }
        }
        .tip {
            line-height: 1.6;
            color: rgba(0, 0, 0, 0.4);
            padding-top: 28rpx;
        }
        .bigBtn {
            color: #fff;
            width: 520rpx;
            height: 80rpx;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            margin: 0 auto;
            margin-top: 60rpx;
            font-size: 28rpx;
        }
    }
}
</style>